<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <style>
    .login {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .login .input-wrap label {
      width: 120px;
      display: block;
    }
    .nav {
      height: 50px;
      background: #dedede;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 20px;
      margin-bottom: 20px;
    }
    .nav span {
      padding: 8px;
      cursor: pointer;
    }
    .nav span:hover {
      color: #09aeef;
    }
    .hide {
      display: none;
    }
  </style>
  <body>
    <script>
      function login() {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        axios
          .post(`/api/user/login?username=${username}&password=${password}`, {
            username,
            password,
          })
          .then((res) => {
            console.log(res);
            let data = res.data;
            if (data.errno == 0) {
              alert("登录成功");
            } else {
              alert("fail");
            }
          });
      }
      function getblogs() {
        axios.get("/api/blog/list").then((res) => {
          console.log(res);
        });
      }
      function navClick() {
        let tid = event.target.id;
        if (tid) {
          document.getElementById("content-" + tid).style.display = "flex";
          let els = ["home", "login", "add", "center"];
          els.forEach((i) => {
            if (i == tid) {
              document.getElementById("content-" + tid).style.display = "flex";
            } else {
              document.getElementById("content-" + i).style.display = "none";
            }
          });
        }
      }
      function updateblog() {
        let title = document.getElementById("article-title").value;
        let content = document.getElementById("article-content").value;
        axios
          .post("/api/blog/new", {
            title,
            content,
          })
          .then((res) => {
            let data = res.data;
            console.log(data, "????");
          });
      }
    </script>
    <!-- window.event -->
    <div class="nav" onclick="navClick(this)">
      <span id="home">首页</span><span id="login">登录</span
      ><span id="add">新增</span><span id="center">个人中心</span>
    </div>
    <div class="home" id="content-home">home</div>
    <div class="login hide" id="content-login">
      <div class="input-wrap">
        <label for="username">用户名</label
        ><input type="text" id="username" value="latmy" autocomplete="off" />
      </div>
      <div class="input-wrap" style="padding-bottom: 10px">
        <label for="password">密码</label
        ><input value="123" type="text" id="password" />
      </div>
      <button onclick="login()">登录</button>
    </div>
    <div class="addOrUpdate hide" id="content-add">
      <textarea name="" id="article-title" cols="30" rows="10"></textarea>
      <textarea name="" id="article-content" cols="30" rows="10"></textarea>
      <button onclick="updateblog()">确定</button>
    </div>
    <div class="center hide" id="content-center">
      center
      <div id="center-username"></div>
      <div class="center-list"></div>
    </div>
  </body>
</html>
